<template>
  <div class="h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col overflow-hidden">
    <!-- 头部标题区域 -->
    <div class="text-center pt-4 sm:pt-6 md:pt-8 pb-2 sm:pb-3 md:pb-4 flex-shrink-0">
      <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-blue-600 mb-2 sm:mb-4">
        个人信息
      </h1>
      <p class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600 px-4">
        查看和编辑您的个人信息
      </p>
    </div>

    <!-- 个人信息表单区域 -->
    <div class="flex items-center justify-center px-4 sm:px-6 py-2 sm:py-3 md:py-4 flex-1">
      <div class="max-w-2xl w-full">
        <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
          <form @submit.prevent="updateUserInfo">
            <div class="mb-6">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                姓名
              </label>
              <input
                type="text"
                v-model="userInfo.name"
                readonly
                class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500 cursor-not-allowed focus:outline-none"
                placeholder="暂无姓名信息"
              />
            </div>

            <!-- 用户名字段（只读） -->
            <div class="mb-6">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                用户名
              </label>
              <input
                type="text"
                v-model="userInfo.username"
                readonly
                class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500 cursor-not-allowed focus:outline-none"
                placeholder="暂无用户名信息"
              />
            </div>

            <!-- 邮箱字段（可编辑） -->
            <div class="mb-6">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                邮箱
              </label>
              <input
                type="email"
                v-model="userInfo.email"
                :disabled="isLoading"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                placeholder="请输入邮箱地址"
              />
            </div>

            <!-- 手机号字段（可编辑） -->
            <div class="mb-8">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                手机号
              </label>
              <input
                type="tel"
                v-model="userInfo.phone"
                :disabled="isLoading"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                placeholder="请输入手机号码"
              />
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-center space-x-4">
              <button
                type="button"
                @click="resetForm"
                :disabled="isLoading"
                class="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                重置
              </button>
              <button
                type="submit"
                :disabled="isLoading"
                class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
              >
                <span v-if="isLoading" class="mr-2">
                  <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </span>
                {{ isLoading ? '保存中...' : '保存修改' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userApi from '@/api/user'
import { Snackbar } from '@varlet/ui'

export default {
  name: 'InformationPage',
  data() {
    return {
      // 用户信息数据
      userInfo: {
        name: '',
        username: '',
        email: '',
        phone: ''
      },
      // 原始用户信息（用于重置）
      originalUserInfo: {},
      // 加载状态
      isLoading: false
    }
  },
  mounted() {
    // 页面加载时获取用户信息
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        this.isLoading = true
        const response = await userApi.getMyInfo()
        if (response.data && response.data.data) {
          // 更新用户信息
          this.userInfo = {
            name: response.data.data.name || '',
            username: response.data.data.username || '',
            email: response.data.data.email || '',
            phone: response.data.data.phone || ''
          }
          // 保存原始信息用于重置
          this.originalUserInfo = { ...this.userInfo }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        Snackbar.error('获取用户信息失败，请稍后重试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 更新用户信息
    async updateUserInfo() {
      try {
        // 验证邮箱格式
        if (this.userInfo.email && !this.isValidEmail(this.userInfo.email)) {
          Snackbar.error('请输入有效的邮箱地址')
          return
        }
        
        // 验证手机号格式
        if (this.userInfo.phone && !this.isValidPhone(this.userInfo.phone)) {
          Snackbar.error('请输入有效的手机号码')
          return
        }
        
        this.isLoading = true
        
        // 只提交可编辑的字段
        const updateData = {
          email: this.userInfo.email,
          phone: this.userInfo.phone
        }
        
        await userApi.updateInfo(updateData)
        
        // 更新原始信息
        this.originalUserInfo = { ...this.userInfo }
        
        Snackbar.success('个人信息更新成功')
      } catch (error) {
        console.error('更新用户信息失败:', error)
        Snackbar.error('更新失败，请稍后重试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 重置表单
    resetForm() {
      this.userInfo = { ...this.originalUserInfo }
      Snackbar.info('表单已重置')
    },
    
    // 验证邮箱格式
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },
    
    // 验证手机号格式（中国大陆手机号）
    isValidPhone(phone) {
      const phoneRegex = /^1[3-9]\d{9}$/
      return phoneRegex.test(phone)
    }
  }
}
</script>

<style scoped>
/* 使用 Tailwind CSS，无需额外样式 */
</style>